<template>
  <view>
    <u-navbar title="校园地图" auto-back fixed placeholder></u-navbar>
    <view class="content">
			<web-view v-if="!isApp" :src="src"
      :fullscreen="false" style="width: 100%;height: 100%;border: none;outline: none;"></web-view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
			isApp: false,
			lng: '116.031253',
			lat: '28.689769',
      src: 'https://static-mp-5dbbbe02-2fca-4a6a-b266-3bd00adef159.next.bspapp.com/'
    }
  },
  created() {
    // #ifdef H5
    // this.drawMap(116.031253, 28.689769)
    // #endif
    // #ifdef APP-VUE
    uni.getLocation({
      type: 'gcj02',
      success: ({ longitude, latitude }) => {
        this.lng = longitude
				this.lat = latitude
      }
    })
    // #endif
  },
  methods: {
    drawMap(lng, lat) {
      const AMapLoader = require('@/common/loader.js')
      AMapLoader.load({
        key: 'a7612c519e467ad0e9ff99ab6b793e2b',
        version: '2.0'
      }).then(AMap => {
        const path = [
          [ 116.027641, 28.695962 ],
          [ 116.023645, 28.686067 ],
          [ 116.024150, 28.685211 ],
          [ 116.038088, 28.683974 ],
          [ 116.036281, 28.684141 ],
          [ 116.037274, 28.689467 ],
          [ 116.037125, 28.690510 ],
          [ 116.037174, 28.692159 ],
          [ 116.037189, 28.692279 ],
          [ 116.037388, 28.693347 ]
        ]
        const polygon = new AMap.Polygon({
          path: path,
          fillOpacity: 0,
          zIndex: 50,
          map: map
        })
        polygon.setPath(path)
        const bounds = polygon.getBounds()
        const map = new AMap.Map('container', {
          mask: [path],
          center: [lng, lat],
          zoom: 18,
          viewMode: '2D',
          rotateEnable: false
        })
        map.setLimitBounds(bounds)
        const circleMarker = new AMap.CircleMarker({
          center: [lng, lat],
          radius: 10,
          fillColor: '#ffffff',
          fillOpacity: 1,
          strokeOpacity: 0,
          strokeColor: '#eeeeee'
        })
        circleMarker.setMap(map)
        map.setRotation(10)
      }).catch(e => {
        console.log(e);
        this.$toast.show({
          msg: '获取地图组件失败'
        })
      })
    }
  },
} 
</script>

<style lang="scss" scoped>
::v-deep iframe {
  border: none;
}
</style>